<template>
  <div class="jobrecord">
    <div class="header">
      <van-icon name="arrow-left" class="tubiao" @click="$router.back()" />
      <span>家政求职记录</span>
    </div>
    <div class="active" @click="To">
      <van-row type="flex" justify="center">
        <van-col span="8">求职岗位：月嫂</van-col>
        <van-col span="8">期望薪资：7000</van-col>
      </van-row>
      <van-row type="flex" class="company-item-head">
        <van-col span="6">
          <van-image :src="img" />
        </van-col>
        <van-col span="18">
          <van-cell :border="false" :title="title" size="large" :label="info" />
          <div class="tags">
            <van-tag
              v-for="(item, index) in tags"
              :key="index"
              plain
              round
              type="primary"
              >{{ item }}</van-tag
            >
          </div>
        </van-col>
      </van-row>

      <van-cell
        :title="distance"
        :value="address"
        icon="location-o"
        class="distance"
      />
    </div>
  </div>
</template>
<script>
import { companys } from '@/api/job'
export default {
  data () {
    return {
      img: '',
      title: '',
      info: '',
      tags: '',
      distance: '',
      address: ''

    }
  },
  created () {
    this.loadrecord()
  },
  methods: {
    async loadrecord () {
      const { data } = await companys()
      this.img = data[0].img
      this.title = data[0].name
      this.info = data[0].info
      this.tags = data[0].tags
      this.distance = data[0].distance
      this.address = data[0].address
    },
    To () {
      this.$router.push(`/companypage/${1}`)
    }
  }
}
</script>
<style lang="less">
.jobrecord {
  .header {
    height: 100px;
    background-color: #3f51b5;
    color: #fff;
    font-size: 32px;
    padding-top: 20px;
    padding-left: 13px;
    span {
      position: absolute;
      top: 45px;
      left: 72px;
      padding-left: 20px;
      font-weight: 700;
    }
    .tubiao {
      position: absolute;
      top: 52px;
      left: 26px;
      padding-left: 20px;
    }
  }
  .active {
    background-color: #fff;
    border-bottom: 1px solid #f5f7f9;
    .van-row--justify-center {
      font-size: 30px;
    }
    .company-item-head {
      .van-image {
        box-sizing: border-box;
        padding: 20px;
      }
      .van-row {
        .van-cell {
          padding: 0;
          border: none;
        }
      }
    }
    .tags {
      padding: 0 0.42667rem;
      .van-tag {
        padding: 10px 20px;
        margin-right: 15px;
      }
    }

    .distance {
      .van-cell__title {
        width: 100px;
        flex: none;
      }
      .van-cell__value {
        white-space: nowrap;
        text-overflow: ellipsis;
        overflow: hidden;
        font-size: 12px;
        margin-left: 17px;
      }
    }
  }
}
</style>
